<template>
  <div class="role-page">
    <div class="top">
      <img class="logo" src="~@/assets/img/logo_ymt.png" alt="" />
      <div class="title_div" v-show="data.time">
        {{ (data.time ? "(" + data.time + ")" : "") + data.name }}}
      </div>
    </div>
    <div class="ddd" ref="ddd">
      <div id="magazine">
        <div v-for="(item, index) in imgs" :key="`test_${index}`">
          <div
            class="text"
            @click="index % 2 == 0 ? nextPage() : backPage(index)"
          >
            <img :src="item" alt="" />
            <div
              v-show="index > 0 && index < imgs.length - 1 && index % 2 == 1"
              class="yy1"
            ></div>
            <div
              v-show="index > 0 && index < imgs.length - 1 && index % 2 == 0"
              class="yy2"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="center_t">
      ( {{ indexPage.join("-") + " / " + imgs.length }} )
    </div>
  </div>
</template>
<script>
import turn from "@/utils/turn.js"
import { getBookDetail } from '@/api/api'
export default {
  name: "FenMian2",
  data () {
    return {
      value: "",
      isShow: false,
      page: 1,
      indexPage: [0, 1],
      data: {},
      imgs: [],
      x: '',
      index: ''
    }
  },
  created () {
    let that = this
    getBookDetail({ id: this.$route.query.id || 1 }).then(res => {
      this.data = res.data
      this.imgs = res.data.imgs
      document.title = `${that.data.time ? '(' + that.data.time + ')' : ''}${that.data.name}`
      this.$nextTick(() => {
        this.init()
      })
    })
  },
  methods: {
    start (e, index) {
      this.index = index
      this.x = e.touches[0].pageX
    },
    end (e) {
      if (e.changedTouches[0].pageX <= this.x) {
        this.nextPage()
      } else {
        this.backPage(this.index)
      }
      this.x = ''
    },
    init () {
      let w1 = document.body.clientWidth
      if (w1 < 700) {
        this.$router.push({ name: 'read', query: { id: this.$route.query.id } })
      }
      let w = parseInt(0.56 * w1)
      this.$refs.ddd.style.width = w + 'px'
      let h = parseInt(w / 2 / 0.707547)
      let self = this
      $("#magazine").turn("page")
      this.$nextTick(() => {
        $("#magazine").turn({
          // display: "single",
          display: "double",
          elevation: 40,
          duration: 200,
          gradients: true,
          autoCenter: true,
          acceleration: true,
          gradients: !$.isTouch,
          page: self.page,
          width: w,
          height: h,
          when: {
            turned: function (e, page, pages) {
              //当前页
              self.indexPage = $(this).turn("view")
              if (self.indexPage[0] > 1 && self.indexPage[0] < self.imgs.length) {
                self.$refs.ddd.style.transform = 'translateX(-50%)'
              } else {
                self.$refs.ddd.style.transform = 'translateX(calc(-50% - ' + (w / 4) + 'px))'
              }
            }
          }
        })
      })
    },
    nextPage () {
      if (this.indexPage == this.imgs.length) {
        this.$message('已经是最后一页了')
      }
      $("#magazine").turn('next')
    },
    backPage (index) {
      $("#magazine").turn("page", index)
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.role-page {
  background-size: 100% 100%;
  // padding: 10px 20px 20px 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.ddd {
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%);
  transition: 0.2s all;
}
.top {
  height: 60px;
  width: 100%;
  background: #666;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  align-items: center;
  position: relative;
  .logo {
    height: 46px;
  }
  .fx {
    height: 22px;
  }
  .title_div {
    left: 0;
    height: 60px;
    line-height: 60px;
    text-align: center;
    width: 100%;
    font-size: 30px;
    font-weight: 800;
    z-index: 1000;
    position: absolute;
    color: #fff;
  }
}
#magazine {
  width: 80%;
  // height: 530px;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  .text {
    width: 100%;
    // height: 530px;
    position: relative;
    img {
      width: 100%;
      pointer-events: none;
    }
  }
  .current-page {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    .even-numbers {
      width: 30px;
      height: 30px;
      background: #ffcc66;
      color: #fff;
      right: 0;
      position: absolute;
      bottom: 0px;
      line-height: 30px;
      text-align: center;
    }
    .odd-number {
      position: absolute;
      bottom: 0px;
      width: 30px;
      height: 30px;
      background: #cc00ff;
      color: #fff;
      line-height: 30px;
      text-align: center;
    }
  }
}

#magazine .shadow,
#magazine.shadow {
  -webkit-box-shadow: 0 4px 10px #666;
  -moz-box-shadow: 0 4px 10px #666;
  -ms-box-shadow: 0 4px 10px #666;
  -o-box-shadow: 0 4px 10px #666;
  box-shadow: 0 4px 10px #666;
}

#magazine .turn-page {
  background-color: #fff;
  background-size: 100% 100%;
  -webkit-box-shadow: 0 4px 10px #666;
  -moz-box-shadow: 0 4px 10px #666;
  -ms-box-shadow: 0 4px 10px #666;
  -o-box-shadow: 0 4px 10px #666;
  box-shadow: 0 4px 10px #666;
}
.mark {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba($color: #000000, $alpha: 0.4);
  img {
    width: 100%;
  }
}
.center_t {
  font-size: 14px;
  color: #fff;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.yy1 {
  background-image: -webkit-linear-gradient(
    right,
    rgba(60, 60, 60, 0.4) 0%,
    rgba(50, 50, 50, 0.1) 54%,
    rgba(200, 200, 200, 0) 100%
  );
  width: 120px;
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
}
.yy2 {
  background-image: -webkit-linear-gradient(
    left,
    rgba(53, 53, 53, 0.5) 0%,
    rgba(53, 53, 53, 0.2) 40%,
    rgba(53, 53, 53, 0.1) 60%,
    rgba(200, 200, 200, 0) 100%
  );
  width: 48px;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
</style>